<template>
    <div
      class="wrap"
      v-show="element.isShow"
      :class="isSelected ? 'selected' : ''"
      @mousedown="handleMouseDown"
      >
      <div v-show="isSelected" class="drag" data-type="drag-wrap">
        <a-icon class="icon" type="drag" />
      </div>
      <!-- 选中时的border -->
      <div class="border"></div>
      <Zoom :defaultStyle="defaultStyle" v-show="isSelected" />
      <!-- 选中时，用幕布挡住组件，避免触发组件事件而影响拖拽 -->
      <div class="mask"
        data-type="component"
        :class="isEdit ? 'edit' : ''"></div>
      <div class="style">
        <slot></slot>
      </div>

    </div>
</template>

<script >

import { mapState } from "vuex"
import Zoom from "./Zoom"
import { deepCopy,setSelectedComponent } from "../../../lib/utils"
import { mouseStatus } from "../../../lib/const"



export default {
  data() {
    return {
      isEdit: true
    }
  },
  props: {
    element: {
      require: true,
      type: Object,
      default: ()=> {}
    },
    defaultStyle: {
      require: true,
      type: Object,
      default: ()=> {}
    },
    isSelected: {
      type: Boolean,
      default: false
    },
    componentClick: {
      type: Function,
      default: ()=> {}
    }

  },
  components: {
    Zoom
  },
  computed: {
    getStyle(){
      const style = this.defaultStyle
      return {

        ...style,
        fontSize: `${style.fontSize  }px`,
        // fontWeight: `${style.fontWeight  }`,
        lineHeight: style.lineHeight + style.lineHeightUnit,
        borderWidth: style.borderWidth + style.borderWidthUnit,
        // borderStyle: style.borderStyle,
        // borderColor: style.borderColor,
        borderRadius:`${style.borderRadius}px`,
        width: "100%",
        height: "100%",
        left: 0,
        top: 0
      }
    },
    getGeometricStyle(){
      const {
        left,leftUnit,top,topUnit,width,widthUnit,height,heightUnit
      } = this.defaultStyle
      return {
        left: left + leftUnit,
        top: top + topUnit,
        width: width + widthUnit,
        height: height + heightUnit,

      }
    },
    

  },
  methods: {
    handleSelect(event){
      event.preventDefault()
      // event.stopPropagation()
      // console.log(event)
      if(event.button !== 0){
        return false
      }
        // 如果没有这个定时器，在input修改数据后，立即点击组件，会有触发selectedComponent(即input)change事件的bug
      setTimeout(()=> {
        this.setSelectedComponent(1, {
          data: this.element
        })
      })
    },
    handleMouseDown(e){
      this.componentClick(e, this.element)
    },
    setSelectedComponent
    

  }

}
</script>

<style lang="less" scoped>
  @import url("./index.less");
</style>

